<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./css/common.css">
    <link rel="stylesheet" type="text/css" href="./css/detail-title.css">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link type="text/css" rel="stylesheet" href="css/iconfont.css">
    <link type="text/css" rel="stylesheet" href="css/catalogue.css">
    <link type="text/css" rel="stylesheet" href="css/subscribe.css">
</head>
<body>
    <div class="root">
        <div class="root background-white">

            <!--详情页头部组件-->
            <div class="detail-title">
                <i class="icon iconfont icon-back_light detail-back"></i>
                <div class="cover-box">
                    <img src="http://www.bgcet.com/upload/cover/2018_2_27/AdTFLEL212vQIdXEWaifLKhe4UKoqZ8GqUQsYkel.jpeg"  alt="" />
                </div>
                <span class="title-page-name span-left">2017年12月四级真题(第一套)</span>
                <span class="span-left title-page-count">总计55题目</span>
                <div class="buy-button buy-common">
                    价格:10000饼干
                </div>
                <div class="buy-button buy-vip">
                    会员:10000饼干
                </div>
            </div>
            <!--详情页头部组件-->

            <!--订阅组件-->
            <div class="subscribe">
                <div class="subscribe-button">
                    购买
                </div>
            </div>
            <!--订阅组件-->



            <!--目录组件-->
            <div class="catalogue">
                <div class="selection-card">
                    <div class="bottom_line"></div>
                   <div>
                       <span data-index="0" class="selection selection-active">详情</span>
                   </div>
                    <div>
                        <span data-index="1" id="ml" class="selection">目录</span>
                    </div>
                </div>
                <div class="catalogue-content-view">
                    <div class="catalogue-content-box">
                        <div class="catalogue-content " >
                            <div class="catalogue-content-wrapper">
                                <p class="about-page">试卷简介</p>
                                <p class="about-page about-page-color">
                                    2016年的四真题包含了55到题目，买不了吃亏买不了上当
                                </p>
                            </div>
                        </div>
                        <div class="catalogue-content " >
                            <div class="catalogue-content-wrapper">
                                <div class="flex-row-4">
                                    <div class="project-question">短篇新闻(1-2)</div>
                                    <div class="project-question">短篇新闻(3-4)</div>
                                    <div class="project-question">短篇新闻(5-7)</div>
                                    <div class="project-question">对话理解(8-11)</div>
                                </div>

                                <div class="flex-row-4">
                                    <div class="project-question">对话理解(12-15)</div>
                                    <div class="project-question">短文听力(16-18)</div>
                                    <div class="project-question">短文听力(19-21)</div>
                                    <div class="project-question">短文听力(22-25)</div>
                                </div>

                                <div class="flex-row-4">
                                    <div class="project-question">选词填空(26-35)</div>
                                    <div class="project-question">阅读匹配(36-45)</div>
                                    <div class="project-question">阅读理解(46-50)</div>
                                    <div class="project-question">阅读理解(51-55)</div>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--目录组件-->
        </div>
    </div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

    var width = window.innerWidth;
    $(".catalogue-content").css('width', width);
    $(".catalogue-content-box").css('width', width*2);

    $(".selection").on('click', function () {
        $(".selection").removeClass('selection-active');
        $(this).addClass('selection-active');
        var left = $(this).offset().left;
        var aa = document.getElementsByClassName('selection');
        console.log(aa);
        console.log(left);
        $(".bottom_line").css('left', left);
        var index = $(this).data('index');
        var position = index * width;
        console.log(position);
        $(".catalogue-content-box").css("left", -position);
    });


</script>
</html>